<template>
  <div class="main-container">
    <el-header>
      <div class="top-container">
        <div class="header-logo">
          <el-image
              :src="logo"
              fit="contain"
              class="logo"
          />
        </div>
        <div class="header-actions" v-if="!isLogin">
          <el-button @click="navigateLogin" type="primary">登录</el-button>
          <el-button @click="navigateRegister">注册</el-button>
        </div>
        <div class="header-info" v-if="isLogin">
          <div>
            <el-avatar :size="40" :src="user.avatar"/>
          </div>
          <div>
            <el-text type="primary"> {{ user.nickname }}</el-text>
          </div>
          <el-dropdown>
            <el-text type="primary">
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </el-text>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-text type="success" @click="adminHandler">发布文章</el-text>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-text type="warning" @click="collectHandler">收藏列表</el-text>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-text type="primary" @click="userCenterHandler">个人中心</el-text>
                </el-dropdown-item>
                <el-dropdown-item @click="logout">
                  <el-text type="danger">退出登录</el-text>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>

      <div class="header-menu-container">
        <el-menu
            :default-active="activeMenu"
            class="header-menu"
            @select="handleMenuSelect"
            mode="horizontal"
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="gallery">美食乐园</el-menu-item>
          <el-menu-item index="health">饮食健康</el-menu-item>
          <el-menu-item index="skill">烹饪技巧</el-menu-item>
        </el-menu>

        <div class="search-container">
          <el-input
              v-model="searchQuery"
              placeholder="搜索..."
              class="search-input"
          />
          <el-button @click="handleSearch" type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="main-content">
      <router-view/>
    </el-main>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import logo from '@/assets/images/logo.png';
import {ArrowDown} from "@element-plus/icons-vue";

// 用户信息
const user = ref({});

// 路由相关
const router = useRouter();
const activeMenu = ref('');

// 用户登录状态
const isLogin = ref(false);

// 检查 token
const checkLoginStatus = () => {
  const token = localStorage.getItem('token');
  if (token) {
    isLogin.value = true;
    // 可以在这里执行登录成功后的逻辑，比如重定向到首页或其他地方
    user.value = JSON.parse(localStorage.getItem('user'));
  } else {
    isLogin.value = false;
    // 可以在这里执行未登录的逻辑，比如重定向到登录页面
    // navigateLogin(); // 如果需要自动跳转到登录页面
  }
};

// 页面加载完成后检查登录状态
onMounted(() => {
  checkLoginStatus();
});

// 菜单选择
const handleMenuSelect = (index) => {
  console.log('菜单选择:', index)
  activeMenu.value = index;
  router.push({name: index});
};

// 登录/注册
const navigateLogin = () => {
  router.push({path: '/login', query: {param: '1'}});
};

const navigateRegister = () => {
  router.push({path: '/login', query: {param: '2'}});
};

// 退出登录
const logout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  isLogin.value = false;
  user.value = {};
  router.push({name: 'home'});
};
// 发布文章
const adminHandler = () => {
  router.push({name: 'article-write'});
};

// 收藏列表
const collectHandler = () => {
  router.push({name: 'collection-list'});
};

// 个人中心
const userCenterHandler = () => {
  router.push({name: 'user-center'});
};

// 搜索
const searchQuery = ref('');
const handleSearch = () => {
  if (searchQuery.value.trim() === '') {
    return;
  }
  // 执行搜索逻辑
  router.push({name: 'search', params: {keyword: searchQuery.value.trim()}});
};


</script>

<style scoped>
.main-container {
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 自动水平居中 */
}

.top-container {
  display: flex;
  justify-content: space-between; /* 水平分散对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 10px 0; /* 上下留白 */
}

.logo {
  width: 100px;
  height: 50px;
}

.header-menu-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平分散对齐 */
}

.header-menu {
  line-height: 60px;
  flex-grow: 1; /* 菜单占据剩余空间 */
}

.header-actions {
  display: flex; /* 使用 Flexbox */
  gap: 10px; /* 按钮之间的间距 */
}

.main-content {
  margin-top: 60px; /* 顶部留白 */
}

.search-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-left: 20px; /* 保持与菜单的间距 */
}

.search-input {
  width: 200px; /* 设置搜索框宽度 */
}

.search-button {
  margin-left: 10px; /* 保持搜索框与按钮的间距 */
}

.header-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 按钮之间的间距 */
}
</style>
